<!DOCTYPE html>																																														
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript07문서객체모델</title>
	</head>
	<body>
		<h3>문서객체모델DOM</h3>
		<p>브라우저는 HTML문서를 읽으면 내부적으로 문서객체모델을 생성함</p>
		<p>문서객체모델은 html태그와 텍스트를 객체화해서 계층적으로 표현한 것을 의미</p>
		<p>자바스크립트와 DOM으로 HTML문서의 모든 요소를 다루거나 변경할 수 있게 해줌</p>
		<p>문서객체모델에는 core DOM, XML DOM, HTML DOM으로 분류</p>
		<p>HTML DOM으로 html문서의 모든 요소(태그)와 속성, 스타일을 추가, 변경, 삭제할 수 있고, 
			심지어 이벤트도 추가, 삭제 할 수 있음</p>
			
		<hr />
		<h3>DOM basic</h3>
		<p>DOM에서 html의 모든 요소는 객체로 취급</p>
		<p>요소를 선택하려면 document객체에서 제공하는 여러 메서드를 사용하면 됨</p>
		<p>getElementById() : id로 객체 선택</p>
		<p>getElementsByTagName() : 태그명으로 객체 선택</p>
		<p>getElementsByClassName() : 클래스명으로 객체 선택 (IE 8이하는 지원X)</p>
		<p>forms[] : 폼 요소로 객체 선택</p>
		<p>images[] : 이미지 요소로 객체 선택</p>
		<p>anchors[] : 링크 요소로 객체 선택</p>
		
		<form name="login">
			<input type="text" name="uid" />
			<input type="password" name="pwd" />
			<button type="button" onclick="checklogin()">입력완료</button>			
		</form>
		
		<hr />
		<p id="find2id"> </p><button type="button" onclick="findid();">id로 찾기</button>
		<span> </span><button type="button" onclick="findtag();">태그로 찾기</button>
		
		<script type="text/javascript">
			function findid(){
				var find2id = document.getElementById("find2id");
				find2id.innerHTML += "이글이 보이시나요요요";
			}
			function findtag(){
				var span = document.getElementsByTagName("span");
				span[0].innerHTML += "이글도 보이나요오오";
			}
			function checklogin(){
				var frm = document.forms.login;
				if (frm.uid.value == ""){
					alert("삐~삐!!!!");
				} else if (frm.pwd.value == ""){
					alert("삐용삐용~!");
				} else {
					alert(frm.uid.value + "랑 " + frm.pwd.value + "입력하셨습니다.");
				}
			}
		</script>
		
		<hr />
		<h3>DOM 출력제어</h3>
		<p>document.write() : html 출력스트림에 쓰기(비추!)<br /></p>
		<p>객체명.innerHTML : html 요소의 내용 변경</p>
		<p>객체명.attribute : html 요소의 속성 변경</p>
		<p>객체명.style.attribute : html 요소의 스타일 변경</p>
		
		<img src="images/1.gif" />
		<button type="button" onclick="chgimg()">그림변경</button>
		
		<h2>We are the future!!</h2>
		<button type="button" onclick="chgh2()">스타일바꾸기</button>

		<button type="button" onclick="modal()">모달창 만들기</button>
		
		<script type="text/javascript">
			document.write("니나뇨니니나냐뇨");
			function chgimg(){
				var img = document.getElementsByTagName("img");
				img[0].src="images/30.gif";
			}
			function chgh2(){
				var h2 = document.getElementsByTagName("h2");
				h2[0].style.color = "red";
				h2[0].style.fontStyle = "italic";
				h2[0].style.textDecoration = "underline";
			}
			function modal() {
				var shadow = document.getElementById("shadow");
				var popup = document.getElementById("popup");
				
				var d1 = document.documentElement;
				var d2 = document.body;
				var sx = Math.max(d2.clientWidth, d1.offsetWidth, d2.offsetWidth, d1.scrollWidth, d2.scrollWidth);
				var sy = Math.max(d2.clientHeight, d1.offsetHeight, d2.offsetHeight, d1.scrollHeight, d2.scrollHeight);
				
				// offsetWidth, offsetHeight
				// 화면에서 보여지는 영역 크기
				// MSIE의 DHTML Object Model
				
				// clientWidth, clientHeight
				// 화면에서 보여지는 영역에서 테두리만을 제외한 크기
				// MSIE의 DHTML Object Model
				
				// scrollWidth, scrollHeight
				// 화면에서 보여지는 스크롤 영역
				// MSIE의 DHTML Object Model
				
				shadow.style.width= sx + "px";
				shadow.style.height= sy + "px";
				shadow.style.top = 0;
				shadow.style.left = 0;
				shadow.style.background = "black";
				shadow.style.position = "absolute";
				shadow.style.opacity = "0.8";
				
				popup.style.width= "400px";
				popup.style.height= "200px";
				var cx = screen.availWidth/2-200;
				var cy = screen.availHeight/2-100;
				popup.style.top = cy + "px";
				popup.style.left = cx + "px";
				popup.style.background = "white";
				popup.style.position = "absolute";
				
				shadow.style.display = "block";
				popup.style.display = "block";			
			}
			function cmodal(){
				var shadow = document.getElementById("shadow");
				var popup = document.getElementById("popup");
				shadow.style.display = "none";
				popup.style.display = "none";
			}
		</script>
		
		<div id="shadow" style="display: none;"> </div>
		<div id="popup" style="display: none;">
			<button type="button" onclick="cmodal()">닫기</button>
		</div>
		
	</body>
</html>
